<template>
  <div class="app-container">
    <!-- 表头工具栏 -->
    <div class="toolbar-container">
      <el-input style="width: 200px;" v-model="searchTerm" />

      <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      <el-button style="margin-left: 10px;" type="primary" icon="el-icon-edit" 
        @click="handleCreate">添加</el-button>
      <el-button style="margin-left: 10px;" type="primary" icon="el-icon-edit" 
        @click="handleAddBat()">批量作废</el-button>        
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      @selection-change="handleSelectionChange"
      >

      <el-table-column
        type="selection"
        width="55">
      </el-table-column>

      <el-table-column label="工号" width="80" align="center" prop="id" />
      <el-table-column label="姓名" width="120" align="center" prop="name" />
      <el-table-column label="手机号" width="120" align="center" prop="telephone" />
      <el-table-column label="查台密码" width="120px" align="center" prop="checkPwd" />
      <el-table-column label="取派标准" width="120px" align="center" prop="standardId" />
      <el-table-column label="是否作废" width="80px" align="center" prop="deltag">
        //显示转换，如果为0则显示否，非0则 是
        <template slot-scope="scope">
          <span>{{ scope.row.deltag=='0' ? '是' : '否' }}</span>
        </template>
      </el-table-column>         
      <el-table-column label="快递员类型" width="120px" align="center" prop="type" />
      <el-table-column label="所属单位 " width="150px" align="center" prop="company" />

      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">作废
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination :current-page="pageQuery.page" :page-sizes="[10,20,30]" :page-size="pageQuery.size" 
        :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="onPageSizeChange" 
        @current-change="onPageChange"/>
    </div>

    <el-dialog :title="titleMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="item" label-position="right" label-width="100px">

        <el-row>
          <el-col :span="12">
            <el-form-item label="快递员姓名" prop="name">
              <el-input v-model="item.name"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="手机" prop="telephone">
              <el-input v-model="item.telephone"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="所属单位" prop="company">
              <el-input v-model="item.company"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="查台密码" prop="checkPwd">
              <el-input v-model="item.checkPwd"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="PDA号码" prop="pda">
              <el-input v-model="item.pda"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="快递类型" prop="type">
              <el-input v-model="item.type"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="是否作废" prop="deltag">
              <el-input v-model="item.deltag"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="取派标准" prop="standardId">
              <el-select v-model="item.standardId" 
                :remote-method="listStandard" remote placeholder="取派标准">
                <el-option v-for="standard in standardList" :key="standard.id" 
                  :label="standard.name" 
                  :value="standard.id"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button v-if="dialogStatus=='create'" type="primary" @click="createData">确认</el-button>
        <el-button v-else type="primary" @click="updateData">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { 
  fetchList,
  delCor,updateCor,addCor,delCorBat
} from '@/api/courier'
import { fetchStanList } from '@/api/standard'

export default {
  data() {
    return {
      selectedItems: [],
      list: [],
      total: null,
      listLoading: false,
      pageQuery: {
        page: 1,
        size: 20
      },

      standardList: [],

      searchTerm: null,

      // 绑定当前编辑或者新建对话框里面表单的数据
      item: {
        id: undefined,
        name:null,
        telephone:null,
        company:null,
        checkPwd:null,
        pda:null,
        type:null,
        courier: {
          id: undefined
        }
      },
      dialogFormVisible: false,
      dialogStatus: '',
      titleMap: {
        update: '编辑',
        create: '新增'
      },

      // 表单的校验规则
      rules: {
      },
    }
  },

  created() {
    // 页面创建的时候，去加载文章列表
    this.getList()
    this.getStanList()
  },

  methods: {
    handleAddBat(){
      var array=this.selectedItems
      if (array==null||array.length==0) {
        return ;        
      }
      var ids=''
      for (let index = 0; index < array.length-1; index++) {
        const element = array[index].id
        ids+='ids='+element+'&'
      }
      ids+='ids='+array[array.length-1].id
      // console.log(ids)

      delCorBat(ids).then(response=>{
        this.getList()
        this.$notify({
          title: '提示',
          message: response.data.message,
          duration: '2000'
        })
      })      
    },
    getStanList(){
      fetchStanList().then(response=>{
        this.standardList=response.data
        console.log(this.standardList)
      })
    },
    // 加载文章列表
    getList() {
      this.listLoading = true

      // 发送http请求，获取数据
      fetchList(this.pageQuery).then(response => {
        this.list = response.data.items
        this.total = response.data.total
        this.listLoading = false
      })
    },

    onPageSizeChange(size) {
      this.pageQuery.size = size
      this.getList()
    },

    onPageChange(page) {
      this.pageQuery.page = page
      this.getList()
    },

    handleCreate() {
      this.item={}
      this.dialogStatus='create'
      this.dialogFormVisible = true;
    },

    createData() {
      addCor(this.item).then(response=>{
        this.getList()
        this.dialogFormVisible=false
        this.$notify({
          title: '提示',
          message: response.data.message,
          duration: '2000'
        })           
      })
    },

    handleSearch() {
    },

    handleDelete(row) {
      console.log(row.deltag)
      if(row.deltag!=0){
        delCor(row).then(response=>{
          this.getList()
          this.$notify({
            title: '提示',
            message: response.data.message,
            duration: '2000'
          })          
        })
      }else{
        this.$notify({
          title:'提示',
          message:'已作废',
          duration:'2000'
        })
      }
    },

    handleUpdate(row) {
      this.item=Object.assign({},row)
      this.dialogStatus='update'
      this.dialogFormVisible=true
    },

    updateData() {
      updateCor(this.item).then(response=>{
        this.dialogFormVisible=false
        this.getList()
        this.$notify({
          title: '提示',
          message: response.data.message,
          duration: '2000'
        })          
      })
    },

    handleSelectionChange(selected) {
      this.selectedItems = selected;
    },

    listStandard() {

    }
  }
}
</script>